<template>
  <div class="orderCancel">
    <div class="top">
      <el-form ref="form" :model="ginseng">
        <div style="display: flex">
          <el-form-item label="订单渠道" size="mini" style="margin: 0 20px 0 0; display: flex">
            <el-select v-model="ginseng.orderChannel" placeholder="请选择订单来源" clearable>
              <el-option label="艺龙" value="Elong"></el-option>
              <el-option label="外采" value="outerPick"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订单号" size="mini" style="margin: 0 20px 0 0; display: flex;">
            <el-input onkeyup="value=value.replace(/[^\x00-\xff]/g, '')" v-model="ginseng.orderNum"
              style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item label="酒店名称" size="mini" style="margin: 0 20px 0 0; display: flex">
            <el-input v-model="ginseng.hotelName" style="width: 200px"></el-input>
          </el-form-item>
        </div>
        <div style="display: flex; margin: 10px 0 0 0">
          <div>
            <span style="color: #525558; font-size: 15px">预定时间</span>
            <el-date-picker size="mini" style="width: 140px" v-model="CX.date1" type="date" placeholder="选择预定日期"
              value-format="yyyy-MM-dd">
            </el-date-picker>
            <span style="color: #525558; font-size: 15px">至</span>
            <el-date-picker size="mini" style="width: 140px" v-model="CX.date2" type="date" placeholder="选择预定日期"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </div>
          <el-button size="mini" style="background-color: #f6b23e;  color: #fff; margin: 0 0 0 50px"
            @click="conditionHotelOrder">搜索</el-button>
        </div>
      </el-form>
    </div>
    <!-- 表格 -->
    <div style="bottom">
      <el-table :data="detalist" border size="mini" :header-cell-style="{
          color: '#fff',
          background: '#6090EC',
          fontSize: '11px',
          fontWeight: 'normal',
        }">
        <el-table-column prop="orderNum" label="订单号" width="100">
        </el-table-column>
        <el-table-column prop="hotelName" label="酒店名称">
        </el-table-column>
        <el-table-column prop="name" width="110" label="入住人姓名"> </el-table-column>
        <el-table-column prop="contact" label="联系人" width="80">
        </el-table-column>
        <el-table-column prop="reservation" label="预定员" width="110">
        </el-table-column>
        <el-table-column prop="orderProcessStart" label="订单流程状态" width="110">
        </el-table-column>
        <el-table-column prop="orderStart" label="订单大状态" width="110">
        </el-table-column>
        <el-table-column prop="paymentMethod" label="支付方式" width="110">
          <template slot-scope="scope">
            <template v-if="scope.row.paymentMethod == '1'">现付</template>
            <template v-if="scope.row.paymentMethod == '2'">担保</template>
            <template v-if="scope.row.paymentMethod == '3'">预付</template>
          </template>
        </el-table-column>
        <el-table-column prop="supplierid" label="酒店渠道" width="90">
          <template slot-scope="scope">
            <template v-if="scope.row.supplierid == 'outerPick'">外采</template>
            <template v-if="scope.row.supplierid == 'Elong'">艺龙</template>
          </template>
        </el-table-column>
        <el-table-column prop="checkTime" label="入住时间" width="110">
        </el-table-column>
        <el-table-column prop="checkOutTime" label="离店时间" width="110">
        </el-table-column>
        <el-table-column prop="scheduledTime" label="预定时间" width="150">
        </el-table-column>
        <!-- <el-table-column prop="name" label="操作" width="250">
          <template slot-scope="scope">
            <el-button size="mini"  v-if="scope.row.plusMoneyStatus == 'payd'" type="warning" @click="cancel(scope.row)">取消</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
    </div>
    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="pageTotal">
    </el-pagination>
  </div>
</template>

<script>
  import Vue from "vue";
  export default {
    name: "orderCancel",
    data() {
      return {
        ruleForm: {
          name: ''
        },
        trainModifywindow: false,
        //时间
        CX: {
          date1: new Date(new Date() - (3600 * 1000 * 24 * 7 + 1000)).toLocaleDateString().replace(/\//g,
          "-"), //   日期时间
          date2: new Date(new Date().getTime() + 86400000).toLocaleDateString().replace(/\//g, "-"),
        },
        //分页
        pageSize: 10,
        currentPage: 1,
        pageTotal: 0,
        totalNumber: "",
        window: {},
        Popup: false,
        orderId: null,
        detailsList: null,
        cancelList: "",
        value: "",
        details: [],
        detalist: [],
        // 入参
        ginseng: {
          // 会员卡号
          orderChannel: "",
          orderNum: "",
          hotelName: "",
        },
      };
    },
    methods: {
      //  搜索按钮
      conditionHotelOrder() {
        localStorage.setItem("pageSize", 10);
        localStorage.setItem("pageNum", 1);
        this.gethotelCancelOrderList()
      },
      // 查询
      gethotelCancelOrderList() {
        this.$axios
          .gethotelCancelOrderList({
            orderChannel: this.ginseng.orderChannel,
            orderNum: this.ginseng.orderNum,
            hotelName: this.ginseng.hotelName,
            scheduledTimeForward: this.CX.date1,
            scheduledTimeBack: this.CX.date2,
          })
          .then((res) => {
            console.log(res);
            if (res.code == "200") {
              this.detalist = res.data;
              // console.log(this.detalist);
              this.pageTotal = res.total;
            }
          });
      },
      //分页
      handleSizeChange(value) {
        console.log("1", value);
        this.pageSize = value;
        this.gethotelCancelOrderList();
        // console.log(value)
      },
      handleCurrentChange(value) {
        console.log("2", value);
        this.currentPage = value;
        this.gethotelCancelOrderList();
        console.log(value);
      },
      //  取消按钮
      cancel(row) {
        console.log(row);
        this.cancelList = row.orderId;
        console.log(this.cancelList);
        this.$router.push({
          name: "hotelCancellation",
          params: {
            cancelList: this.cancelList
          },
        });
      },
    },
    mounted() {
      // 订单列表
      this.gethotelCancelOrderList();
    },
  };
</script>

<style scoped>
  .top {
    margin: 20px 20px 20px 20px;
  }

  .orderCancel {
    margin: 20px;
  }
</style>